<template>
    <view class="message flex">
        <view class="message-left">
             <u-avatar src="https://img2.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="88rpx"></u-avatar>
        </view>
        <view class="message-right">
            <view class="message-right-part1">
                <view class="message-right-part1-user ">
                    <view class="center">
                        <text class="message-right-part1-user-name center">一只胖哒</text>
                        <text class="message-right-part1-user-grade">LV.6</text>
                        <u--image :showLoading="true" src="/static/img/zhiding.png" width="54rpx" height="32rpx" ></u--image>
                    </view>
                    <view class="message-right-part1-user-time">2020-04-21</view>
                </view>
                <u-button class="addAttention">+ 关注</u-button>
            </view>
            <view class="message-right-part2"> 
                每次看到别人的学习vlog就觉得这人是什么手速这么厉害，后来我才发现全都是延时摄影~~~~哈哈哈哈
            </view>
            <view class="message-right-part3">
                <u-image src="https://img.tukuppt.com/bg_grid/00/22/32/U7tnBEEmNi.jpg!/fh/350" :lazy-load="true" width="100%" height="328rpx" radius="16rpx"></u-image>
            </view>
            <view class="message-right-part4">
                <view class="message-right-part4-tag">
                #一周主题摄影比赛
                </view>
                <view class="message-right-part4-tag">
                #人间烟火气 最抚凡人心
                </view>
            </view>
            <view class="message-right-part5">
                <view class="message-right-part5-item center ">
                    <u--image src="/static/img/star.png" width="40rpx" height="40rpx" class="mr-4"></u--image>
                     <text>12</text>
                </view>
                <view class="message-right-part5-item center ">
                    <u--image src="/static/img/perpole.png" width="40rpx" height="40rpx" class="mr-4"></u--image>
                     <text>88</text>
                </view>
                <view class="message-right-part5-item center ">
                    <u--image src="/static/img/remark.png" width="40rpx" height="40rpx" class="mr-4"></u--image>
                     <text>22</text>
                </view>
                <view class="message-right-part5-item center ">
                    <u--image src="/static/img/dianzanActive.png" width="40rpx" height="40rpx" class="mr-4"></u--image>
                     <text>96</text>
                </view>
            </view>
        </view>
        
    </view>
</template>
<style lang="scss" scoped>
.message{
    padding: 40rpx 32rpx;
    &-left{
        margin-right: 16rpx;
    }
    &-right{
        flex: 1;
        &-part1{
            display: flex;
            justify-content: space-between;
            &-user{
                &-name{
                     color: #222; font-size: 28rpx;
                }
                &-grade{
                    font-size: 22rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    border-radius: 20px;
                    background: #000;
                    color: #fff;
                    padding: 0rpx 6rpx;margin-left: 8rpx;
                    margin-right: 6rpx;
                }
                &-time{
                    color: #999999;font-size: 24rpx;
                    margin-top: 16rpx;
                }
            }
            .addAttention{
                width: 140rpx; height: 64rpx;border-radius: 32rpx;margin: 0;
            }
        }
        &-part2{
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
            line-height: 48rpx;
        }
        &-part3{
            margin: 16rpx 0;
        }
        &-part4{
            &-tag{
                background: #FFFFFF;
                border-radius: 28rpx;
                display: inline-block;
                border: 1px solid #E6E6E6;
                margin-right: 32rpx;
                padding: 2rpx 8rpx;
                font-size: 24rpx;color: #666666;
            }
        }
        &-part5{
            display: flex;align-items: center;
            justify-content: space-between;
            margin-top: 40rpx;
            &-item{
                font-size: 24rpx;color: #555555;
            }
        }
    }
}
</style>